<template>
  <div class="opt">
    <div class="path"><span class="level-1">订单管理</span> > <span class="level-2">订单列表</span> > <span class="level-2">订单详情</span></div>
    <div>
      <div class="title"><span>基本信息</span></div>
      <p style="font-weight: bold;margin-top: 10px;">
        <span style="display: inline-block;width: 160px;text-align: right;padding-right: 5px">订单ID：</span>
        <span>{{row.id}}</span>
      </p>
        <Form :label-width="150" class="con info">
          <FormItem label="订单号：">{{'todo'}}</FormItem>
          <FormItem label="淘宝订单号：">{{info.order_number}}</FormItem>
          <FormItem label="创建时间：">{{info.create_time}}</FormItem>
          <FormItem label="任务名称：">{{'todo'}}</FormItem>
          <FormItem label="商家名称：">{{info.storeName}}</FormItem>
          <FormItem label="用户：">{{info.taobao_zhanghao}}</FormItem>
          <FormItem label="发货时间：">{{'todo'}}</FormItem>
          <FormItem label="任务ID：">{{info.tid}}</FormItem>
          <FormItem label="商家ID：">{{info.bid}}</FormItem>
          <FormItem label="用户淘宝会员名称：">{{info.taobao_zhanghao + "(待确定)"}}</FormItem>
        </Form>
    </div>
    <div>
      <div class="title"><span>流程进度</span></div>
      <div class="con service">
        <Steps :current="0">
          <Step title="订单已取消" content="2019-12-13 14:40:4"></Step>
          <Step title="上传淘宝订单" content="未完成"></Step>
          <Step title="商家审核通过" content="未完成"></Step>
          <Step title="申请快递代发" content="未完成"></Step>
          <Step title="快递代发" content="未完成"></Step>
          <Step title="确认收货（完成）" content="未完成"></Step>
        </Steps>
      </div>
    </div>
    <div>
      <div class="title"><span>物流信息</span></div>
      <Form :label-width="120" class="con info">
        <FormItem label="快递公司：">{{info.express_company}}</FormItem>
        <FormItem label="快递单号：">{{info.express_number}}</FormItem>
        <FormItem label="收货人：">{{info.name}}</FormItem>
        <FormItem label="联系电话：">{{info.mobile}}</FormItem>
        <FormItem label="联系地址：">{{info.address}}</FormItem>
        <FormItem label="邮政编码：">todo</FormItem>
        <FormItem label="快递公司编码：">todo</FormItem>
        <FormItem label="物流信息：">。。。</FormItem>
      </Form>
    </div>
    <div>
      <div class="title"><span>订单佣金</span></div>
      <DataList :columns="commissionColumns" :data="commissionList" :needPager="false" :setHeight="88"></DataList>
    </div>
  </div>
</template>
<script>
import {orderDetail} from '@/api/api-list'
import DataList from './DataList'
export default {
  name: 'OrderDetailModal',
  data () {
    return {
      commissionColumns: [
        {
          title: '名称（字段不确定）',
          key: 'nickname'
        },
        {
          title: '受益人角色',
          key: 'type',
          width: 180
        },
        {
          title: '受益人ID',
          key: 'uid',
          width: 180
        },
        {
          title: '受益人名称',
          key: 'username',
          width: 180
        },
        {
          title: '金额',
          key: 'money',
          width: 180
        }
      ],
      info: {},
      commissionList: []
    }
  },
  props: {row: Object},
  components: {DataList},
  methods: {
    getDetail () {
      orderDetail({id: this.row.id, uid: this.row.uid}).then(res => {
        if (res.status !== '0000') return
        this.info = res.data.info
        this.commissionList = res.data.list
      })
    }
  },
  watch: {
    row () {
      console.log('row改变了', this.row.id)
      if (this.row.id) {
        this.getDetail()
      }
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/iview.css";
  .opt{
    overflow: auto;
    >div{
      background: #fff;
      margin-bottom: 10px;
      padding: 5px 10px 10px;
      font-size: 18px!important;
      border-radius: 4px;
    }
    .title{
      padding: 10px 0;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
      span{
        padding: 0 10px;
        border-left: 4px solid #5293fe;
      }
    }
    .path{
      font-size: 15px;
      padding: 10px;
      .level-1{
        border-left: 4px solid #5293fe;
        padding: 2px 10px;
        font-weight: bold;
        font-size: 18px;
      }
      .level-2{
        font-size: 18px;
        padding-left: 10px;
      }
    }
    .con.link{
      display: flex;
      align-items: center;
      padding:20px 15px;
    }
    .con.service{
      display: flex;
      padding:20px 15px;
    }
    .con.info{
      display: flex;
      flex-wrap: wrap;
      padding:20px 15px 0 15px;
      .ivu-form-item{
        min-width: 30%;
        margin: 0;
      }
    }
  }

</style>
